<!DOCTYPE html>
<html>
<!-- head -->
{include file="common/page/head"}
<link rel="stylesheet" href="__app__/admin/view/Store/addStore/addStore.css?z={:mt_rand(1,1000)}" />
<link rel="stylesheet" href="__app__/admin/view/Store/addStore/tencentMap.css?z={:mt_rand(1,1000)}" />
<link rel="stylesheet" href="__app__/admin/view/Store/addStore/layui.css?z={:mt_rand(1,1000)}" />
<link rel="stylesheet" href="__app__/admin/view/Store/addStore/webuploader.css" />
<style>
    form .table-base td select {
        width: 100px;
    }
    #uploader #video-show video{
        width: 150px;
        height: 84px;
    }
    #uploader #video-show video{
        width: 150px;
        height: 84px;
    }
    .btns #afresh {
        margin-right: 35px;
        border-radius: 3px;
    }
    #video #picker {
        float: left;
        margin-right: 35px;
        width: 82px;
        height: 34px;
        line-height: 14px;
        border-radius: 3px;
    }
    #video #ctlBtn {
        border-radius: 3px;
    }
</style>
<body onload="mapinit()">

{include file="common/page/header"}
<!-- 配置文件 -->
<script type="text/javascript" src="__static__/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__static__/js/ueditor/ueditor.all.js"></script>
<div class="content container-fluid {if $leftBarScale eq '1'} scale {/if}">
    <div class="row">
        <div class="col-md-2 left-section">
            <!-- 左导航菜单 -->
            {include file="common/page/menu"}
        </div>
        <div class="col-md-10 right-section">
            <!--内容区域-->
            <h3><i class="icon iconfont"></i>添加门店</h3>
            <div class="inner-section row">
                <form action="#" method="post" id="myForm"  enctype="multipart/form-data">
                    <table class="table table-striped table-hover table-bordered table-base">
                        <tr>
                            <td><label class="must-tag">*</label>账号</td>
                            <td>
                                <input type="text" placeholder="请输入账号" name="username" id="username">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><label class="must-tag">*</label>密码</td>
                            <td>
                                <input type="password" placeholder="请输入密码" name="password" id="password">
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="title"><span class="must-tag">*</span>门店名称</label></td>
                            <td class="td2"><input type="text" id="title" class="form-control" name="title" placeholder="请输入门店名称"></td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="mobile"><span class="must-tag">*</span>门店电话</label></td>
                            <td class="td2"><input type="text" id="mobile" class="form-control" name="mobile" placeholder="请输入门店电话"></td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="open_time"><span class="must-tag">*</span>门店营业时间</label></td>
                            <td class="td2"><input type="text" id="open_time" class="form-control" name="open_time" placeholder="请输入门店营业时间"></td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="fwxy">服务宣言</label></td>
                            <td class="td2"><textarea type="text" id="fwxy" class="form-control" name="fwxy" placeholder="请输入服务宣言"></textarea></td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="yhhd">优惠活动</label></td>
                            <td class="td2"><textarea type="text" id="yhhd" class="form-control" name="yhhd" placeholder="请输入优惠活动"></textarea></td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="user_id">绑定上级用户</label></td>
                            <td class="td2">
                                <button type="button" onclick="assignUser(this)" class="btn btn-default">选择用户</button>
                                <span class="showUserInfo"></span>
                                <input type="hidden" id="user_id" class="form-control" name="user_id" value="" >
                            </td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label><span class="must-tag">*</span>门店头像</label></td>
                            <td class="td2">
                                <input class="form-control" title="支持jpg、jpeg、gif、png格式，文件小于5M" type="file" accept="image/*" id="storeimgs" name="storeimgs">
                            </td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td><label>相册</label></td>
                            <td>
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        预览图：
                                        <div class="layui-upload-list" id="demo2"></div>
                                    </blockquote>
                                    <input type="hidden" name="photo_list" value="">
                                </div>
                            </td>
                            <td></td>
                        </tr>
                        <tr id="video-c">
                            <td class="td1"><label><span class="must-tag">*</span>视频封面图</label></td>
                            <td class="td2">
                                <input class="form-control" title="支持jpg、jpeg、gif、png格式，文件小于5M" type="file" accept="image/*" id="videocover" name="imgs">
                            </td>
                            <td class="td3"></td>
                        </tr>
                        <tr id="video">
                            <td class="td1"><label><span class="must-tag">*</span>上传视频</label></td>
                            <td class="td2">
                                <div id="uploader" class="wu-example">
                                    <!--用来存放文件信息-->
                                    <div id="thelist" class="uploader-list"></div>
                                    <div class="btns">
                                        <a id="afresh" class="btn btn-info hidden">删除视频</a>
                                        <div id="picker">选择视频</div>
                                        <div id="ctlBtn" class="btn btn-default">开始上传</div>
                                        <input type="hidden" id="video-url" name="vcr" value="">
                                    </div>
                                </div>
                            </td>
                            <td class="td3 v-notice"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label><span class="must-tag">*</span>点击选取详细位置</label></td>
                            <td class="td2">
                                <input id="address" type="text" value="" placeholder="">
                                <a class="search-btn" href="javascript:;" onclick="searchAddress()">搜索</a>
                                <span style="color:red;margin-left:10px;">(一定要点击地图选择位置)</span>
                                <div id="container"></div>
                            </td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td class="td1"><label for="address"><span class="must-tag">*</span>门店地址</label></td>
                            <td class="td2"><input type="text" class="form-control" name="address" id="location" value=""></td>
                            <td class="td3"></td>
                        </tr>
                        <tr>
                            <td>
                                <input type="hidden" id="root-url" value="{$Think.const.ROOT_URL}">
                                <input type="hidden" id="longitude" name="lng" value="" >
                                <input type="hidden" id="latitude" name="lat" value="" >
                                <input type="hidden" id="province" name="province" value="" >
                                <input type="hidden" id="city" name="city" value="" >
                                <input type="hidden" id="district" name="district" value="" >
                                <input type="hidden" id="uid" name="uid" value="{$Think.get.user_id}" >
                                <input type="hidden" id="apply_id" name="apply_id" value="{$Think.get.id}" >
                            </td>
                            <td>
                                <a class="btn btn-success btn-md" id='save'>提交</a>
                                <a class="btn btn-default btn-md" href="javascript:window.history.go(-1);">返回</a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
{include file="common/page/jsfiles"}
<!-- 页脚 -->
{include file="common/page/footer"}

<script type="text/javascript" src="__static__/js/form/jquery.form.js"></script>
<script type="text/javascript" src="__static__/js/form/jquery.validate.js"></script>
<script type="text/javascript" src="__static__/js/form/jquery.validate.extend.js"></script>
<!--<script type="text/javascript" src="__static__/js/map.qq.js"></script>-->
<!--<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place" charset="utf-8"></script>-->
<script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=7WCBZ-YFFAD-NQR4A-PLKM6-SEA7O-JEBH3"></script>
<script type="text/javascript" src="__app__/admin/view/Store/editStore/layui.js?z={:mt_rand(1,1000)}"></script>
<script type="text/javascript" src="__app__/admin/view/Store/addStore/addStore.js?z={:mt_rand(1,1000)}"></script>
<!--<script type="text/javascript" src="__app__/admin/view/Store/addStore/tencentMap.js?z={:mt_rand(1,1000)}"></script>-->
<script type="text/javascript" src="__app__/admin/view/Store/addStore/webuploader.js"></script>
<script type="text/javascript" src="__app__/admin/view/Store/addStore/getting-started.js"></script>
<script>
    var map = new TMap.Map('container', {
        zoom: 14,
        center: new TMap.LatLng(31.823726, 117.239664),
    });
    var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
    var markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
    });

    //点击地图
    map.on("click", (evt) => {
        //清空并添加maker
        markers.setGeometries([]);
        markers.updateGeometries([
            {
                id: 'main',
                position: evt.latLng,
            },
        ]);
        let location = new TMap.LatLng(evt.latLng.lat, evt.latLng.lng);
        geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
            .then((result) => {
                //console.log(result.result)
                $('#address').val(result.result.address);
                $('#province').val(result.result.address_component.province);
                $('#city').val(result.result.address_component.city);
                $('#area').val(result.result.address_component.district);
                $('#latitude').val(evt.latLng.lat);
                $('#longitude').val(evt.latLng.lng);
            });
    });

    //搜索
    function searchAddress() {
        //清空并添加maker
        markers.setGeometries([]);
        // 将给定的地址转换为坐标位置
        geocoder.getLocation({ address: document.getElementById('address').value })
            .then((result) => {
                //console.log(result.result)
                markers.updateGeometries([
                    {
                        id: 'main',
                        position: result.result.location, // 将得到的坐标位置用点标记标注在地图上
                    },
                ]);
                map.setCenter(result.result.location);
                $('#address').val(result.result.address_components.province + result.result.address_components.city + result.result.address_components.district + result.result.title);
                $('#province').val(result.result.address_components.province);
                $('#city').val(result.result.address_components.city);
                $('#area').val(result.result.address_components.district);
                $('#latitude').val(result.result.location.lat);
                $('#longitude').val(result.result.location.lng);
            });
    }
</script>
<script>
    function assignUser() {
        var user_id = "{$Think.get.user_id}";
        layer.open({
            type: 2,
            title: '绑定用户',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['80%', '700px'],
            content: "../User/bindUser",
            btn: ['确定', '关闭'],
            yes: function (index) {
                //当点击‘确定'按钮的时候，获取弹出层返回的值
                var customer_info = window["layui-layer-iframe" + index].getData();
                console.log(customer_info)
                if (customer_info.user == '-1') {
                    return layer.alert('请选择用户');
                }
                $('input[name="user_id"]').val(customer_info.user.id)
                $('.showUserInfo').html('已选中的用户：'+customer_info.user.nick_name)
                //最后关闭弹出层
                layer.close(index);
            }
        });
    }
</script>
</body>
</html>